<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">通知列表</div>
        <div style="height: 20px"></div>
        <el-card class="box-card" style="margin: 0 auto">
          <!-- 条件搜索 -->
          <el-form :inline="true" class="demo-form-inline">
            <el-select v-model="isRead" placeholder="请选择">
              <el-option
                v-for="item in chooseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item>
              <!-- <span>this.isRead:{{ this.isRead }}</span> -->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="时间" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.time }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="内容" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.context }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="200">
              <template slot-scope="{ row }">
                <!-- <span>{{ row.state }}</span> -->
                <span v-if="row.state == 'unread'">未读</span>
                <span v-if="row.state == 'read'">已读</span>       
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="{ row }">
                <el-button type="text" @click="read(row.id)"
                  >我知道了</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 查看已读功能
import { getReadNotices } from "@/api/notice.js";
// 查看未读功能
import { getUnreadNotices } from "@/api/notice.js";
// 按条件查找功能
import { readNotice } from "@/api/notice.js";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 搜索
      isRead: "unread",
      //
      chooseList: [
        {
          value: "read",
          label: "已读",
        },
        {
          value: "unread",
          label: "未读",
        },
      ],
      value: "",
      // 通知列表
      tableData: [],
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    console.log("mounted()");
    this.init();
  },
  methods: {
    // 选择read查看已读
    chooseRead() {
      this.isRead = "read";
    },
    // 选择unread查看未读
    chooseUnread() {
      this.isRead = "unread";
    },
    // 初始化
    init() {
      // this.search("unread");
      // alert("init():unread? this.isRead:" + this.isRead);
      console.log("init():unread? :" + this.isRead);
      let dataPage = {
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
      };
      getUnreadNotices(dataPage).then((resp) => {
        this.tableData = resp.data.unreadNoticesPage.content;
        this.total = resp.data.unreadNoticesPage.totalSize;
      });
    },
    // 分页
    getList(pageObj) {
      console.log(pageObj);
      // 获取数据
      this.listQuery.pageNum = pageObj.page;
      this.listQuery.pageSize = pageObj.limit;
      this.init();
    },
    // 根据已读和未读分页展示
    search() {
      // alert("search(isRead):isRead:" + this.isRead);
      console.log("search(isRead):isRead:" + this.isRead);
      if (this.isRead == "read") {
        // 已读，调用分页显示已读通知接口
        console.log("this.isRead:" + this.isRead);
        let dataPage = {
          pageNum: this.listQuery.pageNum,
          pageSize: this.listQuery.pageSize,
        };
        getReadNotices(dataPage).then((resp) => {
          this.tableData = resp.data.readNoticesPage.content;
          this.total = resp.data.readNoticesPage.totalSize;
        });
      } else if (this.isRead == "unread") {
        // 未读，调用分页显示未读通知接口
        console.log("this.isRead" + this.isRead);
        let dataPage = {
          pageNum: this.listQuery.pageNum,
          pageSize: this.listQuery.pageSize,
        };
        getUnreadNotices(dataPage).then((resp) => {
          this.tableData = resp.data.unreadNoticesPage.content;
          this.total = resp.data.unreadNoticesPage.totalSize;
        });
      }
    },
    // “我知道了”将通知标记为已读
    read(rowId) {
      // alert("read(row.id):rowId:" + rowId);
      let dataId = {
        id: rowId,
      };
      readNotice(dataId).then(() => {
        // 确定已读后显示未读列表
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>